<template>
  <div class>
    <div role="tree-item" class="treeItem" v-for="(item) in node" :key="item[$attrs.props.id]">
      <div role="tree-content">
        <div
          role="title"
          :class="item[$attrs.props.id]==currentId?'active':''"
          :style="{'background':`rgba(${255-colorLevel*(item.level-1)},${255-colorLevel*(item.level-1)},${255-colorLevel*(item.level-1)})`}"
        >
          <!-- 展开或收起 -->
          <!-- :style="{'visibility':item.isLeaf&&!item[$attrs.props.children]?'hidden':'visible'}" -->
          <span
            class="tree-content-icon"
            @click.stop="item.isLeaf&&!item[$attrs.props.children]?'':treeToggleClick(item)"
            :class="item.isLeaf&&!item[$attrs.props.children]?'disabled':''"
          >
            {{item.isLeaf&&!item[$attrs.props.children]?"展开":item['expanded']?'收起':"展开"}}
            <!-- <span
              class="iconfont"
              :class="item['expanded']?'iconangle-down':'iconangle-right'"
            ></span>-->
          </span>
          <!-- 标题 -->
          <!-- !enabledConfigClick?'':clickType == 'all'?treeConfigClick(item):(item[$attrs.clickableConditions.part.prop]==$attrs.clickableConditions.part.value?treeConfigClick(item):false) -->
          <label
            class="tree-content-label"
            @click.stop="!enabledConfigClick?'':clickType == 'all'?treeConfigClick(item):($attrs.clickableConditions.part.value.includes(item[$attrs.clickableConditions.part.prop])?treeConfigClick(item):false)"
          >
            <span class="name">{{ item[$attrs.props.name]}}</span>
            <span class="icon">
              <span v-if="$attrs.showTotal">{{$attrs.getName?item[$attrs.getName]:item.projectCount}}</span>
              <!-- <span >{{item.count}}</span> -->
              <i
                class="iconfont iconangle-right"
                v-if="!enabledConfigClick?false:clickType == 'all'?true:($attrs.clickableConditions.part.value.includes(item[$attrs.clickableConditions.part.prop])?true:false)"
              ></i>
              <i
                class="iconfont iconangle-right"
                v-else
                :class="$attrs.showTotal?'iconhidden':'iconnone'"
              ></i>
            </span>
          </label>
        </div>
      </div>
      <VerticalToggle>
        <!-- :style="{ 'padding-left':  .14 + 'rem' }" -->
        <div role="tree-children" v-if="item['expanded']">
          <treeItem :node="item[$attrs.props.children]" v-bind="$attrs" v-on="$listeners" />
        </div>
      </VerticalToggle>
    </div>
  </div>
</template>
<script>
import VerticalToggle from "./js/VerticalToggle";
export default {
  name: "treeItem",
  components: {
    VerticalToggle
  },
  props: {
    node: {}
  },
  data() {
    return {
      tree: null,
      data: [],
      currentId: "",
      enabledConfigClick: false,
      clickType: "all",
      colorLevel: 8
    };
  },
  computed: {},
  created() {
    if (this.$attrs.clickableConditions) {
      if (
        this.$attrs.clickableConditions.all &&
        this.$attrs.clickableConditions.all.enable
      ) {
        this.enabledConfigClick = true;
        this.clickType = "all";
      } else if (this.$attrs.clickableConditions.part) {
        this.enabledConfigClick = true;
        this.clickType = "part";
      } else {
        this.enabledConfigClick = false;
      }
    } else {
      this.enabledConfigClick = false;
    }
  },
  mounted() {},
  watch: {},
  methods: {
    /**点击展开收起的事件 */
    treeToggleClick(item) {
      // this.currentId = item[this.$attrs.props.id];
      if (this.$attrs.lazy) {
        if (item.isLeaf || item[this.$attrs.props.children]) {
          this.$set(item, "expanded", !item.expanded);
        } else {
          if (item.orgType && item.orgType == 1) {
            this.$set(item, "expanded", !item.expanded);
            this.$set(item, "isLeaf", true);
          } else {
            this.$parent.$emit("load", item);
          }
          //this.$parent.$emit("load", item);
        }
      } else {
        this.$set(item, "expanded", !item.expanded);
      }
    },
    /**点击右侧文字的事件 */
    treeConfigClick(item) {
      this.$attrs.itemActive
        ? (this.currentId = item[this.$attrs.props.id])
        : "";
      this.$parent.$emit("click", item);
    },
    postData(item) {
      debugger;
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
/*树形组件*/
</style>
